<template>
  <div class="change-password-container">
    <p class="anth-title" v-if="getConfig.flag && !authStatus">{{$t('当前状态未授权，授权后可查看基础功能信息')}}</p>
    <div class="my-step" v-if="getConfig.flag">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step :title="$t('授权信息')"></el-step>
        <el-step :title="$t('导入文件')"></el-step>
        <el-step :title="$t('修改密码')"></el-step>
      </el-steps>
    </div>
    <div class="anth" v-if="[2].includes(active) && authStatus">
      <Licence currentType="ChangePassword" :getConfig="getConfig" ref="licence" @getLicenceLoad="getLicenceLoad" />
    </div>
    <div class="anth" v-else-if="[0,1,2].includes(active) && !authStatus">
      <Licence currentType="ChangePassword" :getConfig="getConfig" ref="licence" @getLicenceLoad="getLicenceLoad" />
    </div>
    <div class="changePasswordContext" v-if="active===2 && authStatus">
      <div class="my-form">
        <span v-if="!getConfig.flag">{{$t(userInfo.role)}}:{{record.name}}</span>
        <p style="color: red;">{{$t(getConfig.title)}}</p>
        <el-form v-if="getConfig.flag" ref="form" :model="record" label-width="150px" :rules="rules" label-position="left" style="margin:0 20px;">
          <el-form-item :label="$t('管理员名称')" prop="name">
            {{record.name}}
          </el-form-item>
          <el-form-item :label="$t('密码')" prop="password">
            <!-- <el-input v-emoji  v-model="record.password" style="width:300px;" size='small' type="password" autocomplete="new-password"></el-input> -->
            <el-input v-emoji v-model="record.password" style="width:300px;" size='small' @focus="handleFocus" @blur="handleBlur" class="inputPsd"></el-input>
            <div class="adminConfigPassword">{{$t('密码至少8位，至多24位，至少使用数字、小写字母、大写字母、特殊符号中的三种，并且密码字符中不应包含管理员名称！')}}</div>
          </el-form-item>
          <el-form-item :label="$t('确认密码')" prop="password_agree">
            <!-- <el-input v-emoji  v-model="record.password_agree" style="width:300px;" size='small' type="password" autocomplete="new-password"></el-input> -->
            <el-input v-emoji v-model="record.password_agree" style="width:300px;" size='small' @focus="handleFocus" @blur="handleBlur" class="inputPsd"></el-input>
          </el-form-item>
        </el-form>
        <div v-if="getConfig.flag">
          <el-button type="primary" @click="submit">{{$t('提 交')}}</el-button>
        </div>
      </div>
    </div>
    <!-- 导入文件 -->
    <upload-file v-if="getConfig.flag && [1,2].includes(active) && !authStatus" ref="licenceDialogRef" currentType="ChangePassword"></upload-file>
    <div class="group-btn" v-if="getConfig.flag && !(active==2)">
      <el-button style="margin-top: 12px;" @click="handleNext">{{$t('下一步')}}</el-button>
    </div>
  </div>
</template>
<script>
import Licence from "@/pages/Home/components/licence.vue"
import UploadFile from "@/pages/Home/components/licence/uploadFile.vue"
import { editPassword } from '@/api/system/adminConfig/administrators'
import { getUserInfo } from '@/utils/auth'
import { logout } from '@/api/login'
export default {
  name: 'DownloadDialog',
  components:{
    Licence,
    UploadFile
  },
  data () {
    var validatePassword = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入密码')))
      } else {
        callback()
      }
    }
    var validatePasswordAgree = (rule, value, callback) => {
      if (this.record.password !== this.record.password_agree) {
        callback(new Error(this.$t('密码两次输入的不一致,请仔细确认!')))
      } else {
        callback()
      }
    }
    return {
      active:0,
      dialogVisible: false,
      userInfo: getUserInfo(),
      record: {
        name: getUserInfo().username,
        password: '',
        password_agree: ''
      },
      recordCopy: {
        name: '',
        password: '',
        password_agree: ''
      },
      rules: {
        password: [{ required: false, validator: validatePassword, trigger: 'blur' }],
        password_agree: [{ required: false, validator: validatePasswordAgree, trigger: 'blur' }]
      },
      authStatus:false,
    }
  },
  computed: {
      getConfig() {
        // roleID 1 超级管理员 2 审计管理员 3 系统管理员 4 配置管理员
        if([2, 4].includes(this.userInfo.roleID)) {
          return {
            title:'首次登录，请联系系统管理员进行修改密码！',
            flag:false
          }
        } else {
          return {
            title:'首次登录，请修改密码！',
            flag:true
          }
        }
      },
  },
  created () {
    let _that = this
    window.addEventListener('beforeunload', function (e) {
      _that.$store.dispatch('user/logout')
      logout()
    })
    window.addEventListener('popstate', function (e) {
      _that.$store.dispatch('user/logout')
      logout()
    })
    window.history.pushState('forward', null, '#') // 在IE中必须得有这两行
    window.history.forward(1)
  },
  beforeDestroy () {
  },
  methods: {
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.record.port = Number(this.record.port)
          editPassword({ name: this.record.name, password: this.record.password }).then(res => {
            if (res.status === 0) {
              this.$store.dispatch('user/logout')
              logout()
              this.$message({
                message: this.$t('修改成功'),
                type: 'success'
              })
            }
          })
        }
      })
    },
    listData() {
      this.$refs.licence.listData();
    },
    getLicenceLoad() {
      const licenceListMap =  this.$refs.licence && this.$refs.licence.licenceList[0];
      this.authStatus  = ['未授权','Unauthorized'].includes(licenceListMap.status) ? false :true;
       if(this.authStatus) {
        this.active = 2;
       }
    },
    handleNext() {
      console.log(this.authStatus,'this.authStatus')
      if(!this.authStatus) {
        if(this.active === 0) {
          this.dialogVisible = true;
        }
        if(this.active === 1 || this.active === 2) {
           this.dialogVisible = true;
           return this.$nextTick(() => {
            this.$refs.licenceDialogRef.init()
          })
        }
      }
      this.active++;
      console.log(this.$refs.licence)
    },
    handleFocus () {
      this.$refs.password = 'password'
    },
    handleBlur () {
      this.$refs.password = 'text'
    }
  }
}
</script>
<style lang="less" scoped>
.change-password-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 50px;
  .anth-title {
    font-size: 16px;
    font-weight: 700;
    color: red;
    margin-bottom: 16px;
    text-align: center;
    }
  .my-step {
    width: 600px;
  }
}
.adminConfigPassword {
  font-size: 12px;
  line-height: 20px;
  color: #999;
}
.inputPsd {
  -webkit-text-security: disc;
}
.changePasswordContext {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .my-form {
    text-align: center;
  }
}
.anth {
  width: 900px;
}
/deep/ .licenceContainer {
  height: inherit;
}
</style>
